<template>
	<div class="model-add">
		<div class="shade"></div>
		<div class="popup">
			<div class="title justify-content-between">
				<span class="fs28 colorFFF">{{title}}</span>
				<img src="../assets/images/icon-close.png" @click="cancel()">
			</div>
			<div class="lists">
				<div class="list">
					<div class="key"><span class="colorF00">*</span>任务名称：</div>
					<input class="val" type="text" v-model="modelInfo.modelName" placeholder="请输入任务名称" />
				</div>
				<div class="list">
					<div class="key"><span class="colorF00">*</span>设备名称：</div>
					<input class="val" type="text" v-model="modelInfo.deviceName" placeholder="请输入设备名称" />
				</div>
                <div class="list">
                    <div class="key"><span class="colorF00">*</span>设备代号：</div>
                    <input class="val" type="text" v-model="modelInfo.deviceCode" placeholder="请输入设备代号" />
                </div>
				<div class="list">
					<div class="key"><span class="colorF00">*</span>设备数量：</div>
					<input class="val" type="number" v-model="modelInfo.deviceNum" placeholder="请输入设备数量" @keydown="keyDown" />
					<div class="unit">个</div>
				</div>
				<div class="list">
					<div class="key"><span class="colorF00">*</span>系统名称：</div>
					<input class="val" type="text" v-model="modelInfo.sysName" placeholder="请输入系统名称" />
				</div>
				<div class="list">
					<div class="key">分系统名称：</div>
					<input class="val" type="text" v-model="modelInfo.sysSubName" placeholder="请输入分系统名称" />
				</div>
                <div class="list">
                    <div class="key"><span class="colorF00">*</span>分类：</div>
                    <input class="val" type="text" v-model="modelInfo.classify" placeholder="请输入分类" />
                </div>
                <div class="list">
                    <div class="key"><span class="colorFFF">*</span>任务简介：</div>
                    <textarea class="val-plus" v-model="modelInfo.modelDesc" placeholder="请输入任务简介"></textarea>
                </div>
			</div>
			<div class="btns justify-content-center">
				<div class="btn sure" @click="save" v-loading="loading">确认</div>
				<div class="btn cancel" @click="cancel()">取消</div>
			</div>
		</div>
	</div>
</template>

<script>

export default {
    name: 'ModelAdd',
    props: {
    	modelData: Object //编辑数据
    },
    data () {
        return {
        	title: '新增任务',
            loading: false, //加载中
            modelInfo: {
            	modelName: '',
            	deviceName: '',
                deviceCode: '',
            	deviceNum: '',
            	sysName: '',
            	sysSubName: '',
                classify: '',
                modelDesc: ''
            }, //表单数据
        }
    },
    created() {
        if (this.modelData.id) {
            this.title = '任务修改';
            Object.assign(this.modelInfo, this.modelData);
        } else {
            this.title = '新增任务';
        }
    },
    methods: {
        /**
         * 关闭弹窗
         * @param {Number} refresh - 是否刷新列表 1是
         */
    	cancel(refresh) {
    		Object.keys(this.modelInfo).forEach((key) => (this.modelInfo[key] = ''));
    		this.$emit('cancel', refresh);
    	},
        // 键盘按下事件
        keyDown() {
            var keyCode = event.keyCode;   
            if (keyCode == 109 || keyCode == 110) {    
                event.returnValue = false;    
            } else {
                event.returnValue = true;    
            }  
        }, 
        // 保存数据
    	save() {
    		let _this = this;
    		if (_this.modelInfo.modelName == '') {
    			_this.$message({
          			message: '任务名称不能为空',
          			type: 'warning'
        		});
    		} else if (_this.modelInfo.deviceName == '') {
    			_this.$message({
          			message: '设备名称不能为空',
          			type: 'warning'
        		});
    		} else if (_this.modelInfo.deviceCode == '') {
                _this.$message({
                    message: '设备代号不能为空',
                    type: 'warning'
                });
            } else if (_this.modelInfo.deviceNum === '') {
    			_this.$message({
          			message: '设备数量不能为空',
          			type: 'warning'
        		});
    		} else if (_this.modelInfo.deviceNum <= 0) {
                _this.$message({
                    message: '设备数量必须大于0',
                    type: 'warning'
                });
            } else if (_this.modelInfo.sysName == '') {
    			_this.$message({
          			message: '系统名称不能为空',
          			type: 'warning'
        		});
    		} else if (_this.modelInfo.classify == '') {
                _this.$message({
                    message: '分类不能为空',
                    type: 'warning'
                });
            } else {
                _this.loading = true;
                if (_this.modelInfo.id) {
                    _this.axios.modelEdit(_this.modelInfo).then((res) => {
                        console.log(res)
                        if (res.code == 200) {
                            _this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            _this.cancel(1);
                        } else {
                            _this.$message.error(res.msg);
                        }
                        _this.loading = false;
                    }).catch(function (error) {
                        _this.loading = false;
                        _this.$message.error(error.msg);
                    });
                } else {
                    _this.axios.modelSave(_this.modelInfo).then((res) => {
                        console.log(res)
                        if (res.code == 200) {
                            _this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            _this.cancel(1);
                        } else {
                            _this.$message.error(res.msg);
                        }
                        _this.loading = false;
                    }).catch(function (error) {
                        _this.loading = false;
                        _this.$message.error(error.msg);
                    });
                }
    		}
    	}
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .model-add {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;
    	.shade {width: 100%;height: 100%;background: rgba(0,0,0,.3);}
		.popup {width: 640rem;height: 704rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #FFF;box-shadow: 0 5rem 15rem 0 rgba(0, 21, 54, 0.25);
			.title {width: 100%;height: 58rem;background-color: #285FE3;padding: 0 23rem 0 28rem;
				img {width: 23rem;height: 23rem;cursor: pointer;}
			}
			.lists {margin-top: 41rem;}
			.list {width: 100%;margin-top: 20rem;padding-left: 80rem;display: flex;align-items: center;
				.key {width: 160rem;font-size: 24rem;color: #161D2E;}
				.val {width: 320rem;height: 36rem;border: 1px solid #AAB3C4;font-size: 20rem;color: #505971;padding-left: 12rem;font-family: 'Microsoft YaHei,Arial';}
				.val::placeholder {color: #AAB3C4;}
				.val:focus {outline: 1px solid #316EFF;color: #161D2E;}
                .val-plus {width: 320rem;height: 72rem;border: 1px solid #AAB3C4;font-size: 20rem;color: #505971;padding-left: 12rem;resize: none;font-weight: 400;font-family: 'Microsoft YaHei,Arial';}
                .val-plus::placeholder {color: #AAB3C4;}
                .val-plus:focus {outline: 1px solid #316EFF;color: #161D2E;}
				.unit {font-size: 18rem;color: #161D2E;margin-left: 6rem;}
			}
			.list:first-child {margin-top: 0;}
			.btns {width: 100%;margin-top: 58rem;
				.btn {width: 130rem;height: 40rem;margin-left: 112rem;line-height: 40rem;text-align: center;border-radius: 3rem;font-size: 22rem;cursor: pointer;}
				.btn.sure {background: linear-gradient(0deg, #00A366 0%, #00C37A 100%);color: #FFF;}
				.btn.cancel {border: 1px solid #316EFF;background: linear-gradient(0deg, #D9DDE8 0%, #FFFFFF 100%);color: #505971;}
				.btn:first-child {margin-left: 0;}
			}
		}
    }
    .colorF00 {color: #F00}
</style>